<template>
  <div class="timeline-container">
    <!-- 大限部分 -->
    <div class="fate-section daxian-section">
      <div class="section-header">
        <h3 class="section-title">
          <span class="title-icon">⏳</span>
          十二大限
        </h3>
      </div>
      
      <div class="table-wrapper">
        <table class="fate-table">
          <thead>
            <tr>
              <th>大限序号</th>
              <th>年龄范围</th>
              <th>年份</th>
              <th>所在宫位</th>
              <th>特征描述</th>
            </tr>
          </thead>
          <tbody>
            <tr 
              v-for="(daxian, index) in chartData.daXian" 
              :key="index"
              :class="['fate-row', isCurrentDaXian(daxian) ? 'current-daxian' : '']"
            >
              <td class="number-cell">第{{ index + 1 }}限</td>
              <td>{{ daxian.startAge }}~{{ daxian.endAge }}岁</td>
              <td>{{ daxian.startYear }}~{{ daxian.endYear }}年</td>
              <td class="palace-cell">{{ getEarthlyBranch(daxian.position) }}宫</td>
              <td class="description-cell">{{ getDaXianDescription(daxian) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <!-- 流年部分 -->
    <div class="fate-section liunian-section">
      <div class="section-header">
        <h3 class="section-title">
          <span class="title-icon">✨</span>
          {{ userInfo.currentYear }}年流年预测
        </h3>
      </div>
      
      <div class="liunian-grid">
        <div class="liunian-card info-card">
          <h4 class="card-title">基本信息</h4>
          <div class="card-content">
            <p class="info-item">
              <span class="info-label">年龄：</span>
              <span class="info-value">{{ chartData.liuNian.age }}岁</span>
            </p>
            <p class="info-item">
              <span class="info-label">流年干支：</span>
              <span class="info-value">{{ chartData.liuNian.ganZhi }}年</span>
            </p>
            <p class="info-item">
              <span class="info-label">流年宫位：</span>
              <span class="info-value">{{ getEarthlyBranch(chartData.liuNian.position) }}宫</span>
            </p>
            <p class="info-item">
              <span class="info-label">所在大限：</span>
              <span class="info-value">第{{ getCurrentDaXianIndex() + 1 }}限
              ({{ getCurrentDaXian()?.startAge || '' }}~{{ getCurrentDaXian()?.endAge || '' }}岁)</span>
            </p>
          </div>
        </div>
        
        <div class="liunian-card prediction-card">
          <h4 class="card-title">流年运势解析</h4>
          <div class="card-content prediction-content">
            {{ getLiuNianDescription() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TimeLine',
  props: {
    chartData: Object,
    userInfo: Object
  },
  methods: {
    getEarthlyBranch(position) {
      const branches = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
      return branches[(position - 1) % 12];
    },
    
    isCurrentDaXian(daxian) {
      if (!this.chartData || !this.chartData.liuNian) return false;
      
      const currentAge = this.chartData.liuNian.age;
      return currentAge >= daxian.startAge && currentAge <= daxian.endAge;
    },
    
    getCurrentDaXianIndex() {
      if (!this.chartData || !this.chartData.daXian || !this.chartData.liuNian) return -1;
      
      const currentAge = this.chartData.liuNian.age;
      return this.chartData.daXian.findIndex(
        daxian => currentAge >= daxian.startAge && currentAge <= daxian.endAge
      );
    },
    
    getCurrentDaXian() {
      const index = this.getCurrentDaXianIndex();
      if (index === -1) return null;
      
      return this.chartData.daXian[index];
    },
    
    getDaXianDescription(daxian) {
      // 根据大限宫位生成描述文字
      // 实际应用中应根据宫位和星曜生成有意义的描述
      const position = daxian.position;
      const descriptions = [
        '事业发展期，适合积极进取。',
        '人际关系活跃，注意交友质量。',
        '感情婚姻变动，需谨慎处理。',
        '子女缘分到来，家庭和谐。',
        '财运起伏较大，宜稳健理财。',
        '健康需要关注，调整生活方式。',
        '外出机会增多，拓展视野。',
        '贵人运旺盛，得到他人帮助。',
        '事业上升期，有晋升机会。',
        '居住环境变动，家庭关系稳定。',
        '心情起伏较大，保持心态平衡。',
        '长辈运势良好，家族和谐。'
      ];
      
      return descriptions[(position - 1) % 12];
    },
    
    getLiuNianDescription() {
      // 生成流年运势描述
      // 实际应用中应根据流年宫位、当年太岁干支等综合分析
      if (!this.chartData || !this.chartData.liuNian) return '';
      
      const position = this.chartData.liuNian.position;
      const branches = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
      const branch = branches[(position - 1) % 12];
      
      const descriptions = {
        '子': '今年事业运势较好，适合开拓进取，把握机会。财运方面需谨慎投资，避免风险。健康方面注意休息，防止过度劳累。',
        '丑': '今年人际关系较为复杂，需谨慎处理各种社交场合。财运稳定，适合稳健理财。健康方面注意消化系统的保养。',
        '寅': '今年感情上可能有新的变化，单身者有机会遇到心仪对象。事业上有贵人相助，进展顺利。健康方面注意颈椎和肩膀。',
        '卯': '今年家庭关系和谐，子女运势良好。事业上需踏实努力，不宜冒进。财运方面收支平衡，避免大额消费。',
        '辰': '今年财运较为波动，投资需谨慎。工作上可能面临挑战，需要调整心态和策略。健康方面注意饮食规律。',
        '巳': '今年健康方面需要特别关注，适当增加体育锻炼，保持良好作息。事业稳定发展，适合深耕细作。',
        '午': '今年外出机会增多，可能有短期旅行或出差。人际关系良好，容易获得他人支持。财运方面收入稳定。',
        '未': '今年贵人运旺盛，社交圈有所扩大。事业上有机会展现才能，得到赏识。健康方面注意情绪管理。',
        '申': '今年事业运势上升，可能有晋升或加薪机会。工作压力也相应增大，需注意平衡。家庭关系和谐。',
        '酉': '今年居住环境可能有变动，家庭关系需要更多沟通和理解。事业稳定，适合长期规划。财运平稳。',
        '戌': '今年心情起伏较大，需要学会调节情绪，保持心态平衡。事业上需要耐心突破瓶颈。人际关系良好。',
        '亥': '今年与长辈、父母关系和谐，家族关系融洽。事业上适合稳扎稳打，不宜冒进。财运需要精打细算。'
      };
      
      return descriptions[branch] || '今年整体运势平稳，各方面保持平衡发展，适合稳步前行。';
    }
  }
};
</script>

<style lang="scss">
// 中国传统色彩变量
$imperial-gold: #d4af37;
$scroll-beige: #f5ecd9;
$cinnabar-red: #8a2924;
$jade-green: #286649;
$ochre-yellow: #c3832a;
$deep-brown: #6d3d14;
$pale-yellow: #fcf4dc;
$ink-black: #272829;
$regal-purple: #7b4f9e;

// 五行颜色变量
$element-wood: #68904d;    // 木
$element-fire: #c14536;    // 火
$element-earth: #b5a642;   // 土
$element-metal: #949494;   // 金
$element-water: #5a7d9a;   // 水

// 命运时间线容器
.timeline-container {
  font-family: 'SimSun', 'STFangsong', serif;
  color: $deep-brown;
  
  // 命运区块通用样式
  .fate-section {
    background-color: $scroll-beige;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba($deep-brown, 0.1);
    background-image: url('');
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
    }
    
    // 不同区块的顶部装饰色
    &.daxian-section::before {
      background: linear-gradient(90deg, $element-water, $element-earth, $element-water);
    }
    
    &.liunian-section::before {
      background: linear-gradient(90deg, $element-fire, $imperial-gold, $element-fire);
    }
  }
  
  // 区块标题
  .section-header {
    padding: 1rem;
    border-bottom: 1px dashed rgba($deep-brown, 0.3);
    
    .section-title {
      font-size: 1.25rem;
      font-weight: bold;
      color: $deep-brown;
      margin: 0;
      display: flex;
      align-items: center;
      
      .title-icon {
        margin-right: 0.5rem;
        font-size: 1.1rem;
      }
    }
  }
  
  // 表格样式
  .table-wrapper {
    overflow-x: auto;
    padding: 1rem;
    
    .fate-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      
      th, td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid rgba($deep-brown, 0.1);
      }
      
      th {
        background-color: rgba($deep-brown, 0.08);
        font-weight: 600;
        color: $deep-brown;
        position: relative;
        
        &:not(:last-child)::after {
          content: '';
          position: absolute;
          right: 0;
          top: 25%;
          height: 50%;
          width: 1px;
          background-color: rgba($deep-brown, 0.15);
        }
      }
      
      td {
        position: relative;
        
        &:not(:last-child)::after {
          content: '';
          position: absolute;
          right: 0;
          top: 25%;
          height: 50%;
          width: 1px;
          background-color: rgba($deep-brown, 0.05);
        }
      }
      
      .fate-row {
        transition: all 0.3s ease;
        
        &:hover {
          background-color: rgba($imperial-gold, 0.08);
        }
        
        &:nth-child(even) {
          background-color: rgba(white, 0.4);
          
          &:hover {
            background-color: rgba($imperial-gold, 0.08);
          }
        }
        
        &.current-daxian {
          background-color: rgba($element-earth, 0.15);
          
          &:hover {
            background-color: rgba($element-earth, 0.2);
          }
          
          td {
            font-weight: 500;
            color: darken($deep-brown, 10%);
          }
        }
      }
      
      .number-cell {
        font-weight: 600;
        color: $regal-purple;
      }
      
      .palace-cell {
        font-weight: 500;
        color: $element-wood;
      }
      
      .description-cell {
        color: $ink-black;
        max-width: 300px;
      }
    }
  }
  
  // 流年卡片网格
  .liunian-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    
    @media (min-width: 768px) {
      grid-template-columns: minmax(200px, 1fr) 2fr;
    }
  }
  
  // 流年卡片样式
  .liunian-card {
    background-color: rgba(white, 0.6);
    border-radius: 0.5rem;
    border: 1px solid rgba($deep-brown, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba($deep-brown, 0.15);
      transform: translateY(-2px);
    }
    
    .card-title {
      background-color: rgba($deep-brown, 0.08);
      padding: 0.75rem 1rem;
      margin: 0;
      font-size: 1.1rem;
      font-weight: 600;
      color: $deep-brown;
      border-bottom: 1px solid rgba($deep-brown, 0.1);
    }
    
    .card-content {
      padding: 1rem;
    }
    
    // 信息卡片
    &.info-card {
      border-left: 3px solid $element-water;
      
      .info-item {
        margin-bottom: 0.5rem;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .info-label {
          font-weight: 600;
          color: $deep-brown;
        }
        
        .info-value {
          color: $ink-black;
        }
      }
    }
    
    // 预测卡片
    &.prediction-card {
      border-left: 3px solid $element-fire;
      
      .prediction-content {
        line-height: 1.6;
        color: $ink-black;
      }
    }
  }
}
</style>